<template>
    <div>
        <gstc :config="config" />
    </div>
</template>

<script>
import GSTCComponent, { GSTC } from '../components/GSTC.vue';
import configBase from '../config/index'
let subs = [];

const GSTCID = GSTC.api.GSTCID;
const columns = {
    data: {
        nodeName: {
            id: "nodeName",
            data: "nodeName",
            width: 120,
            // expander: true, // 是否可以折叠
            header: {
                content: "节点名称"
            }
        },
    },
};

const rows = {
    [GSTCID('1')]: {
        id: GSTCID('1'),
        nodeName: 'Row #1',
    },
    [GSTCID('3')]: {
        id: GSTCID('1'),
        nodeName: '总任务',
    },
    // [GSTCID('2')]: {
    //     id: GSTCID('2'),
    //     nodeName: 'Row #2',
    // },
    // "3": {
    //     id: "3",
    //     nodeName: "总任务",
    // },
};

const items = {
    [GSTCID('1')]: {
        id: GSTCID('1'),
        nodeName: 'Item #1',
        rowId: GSTCID('1'), // row id
        time: {
            start: GSTC.api.date('2020-01-01').valueOf(),
            end: GSTC.api.date('2020-01-02').valueOf(),
        },
    },
    [GSTCID('3')]: {
        id: GSTCID('3'),
        nodeName: '总任务',
        rowId: GSTCID('3'),
        time: {
            start: GSTC.api.date('2020-01-01').valueOf(),
            end: GSTC.api.date('2020-01-02').valueOf(),
        },
    },
};
const config = {
    licenseKey: configBase.license.key,
    innerHeight: 100,
    list: {
        columns,
        rows,
    },
    chart: {
        items,
    },
};

export default {
    name: 'Example',
    components: {
        gstc: GSTCComponent,
    },
    data() {
        return {
            config,
        };
    },
    methods: {
        onState(state1) {
            this.state1 = state1;
            subs.push(
                state1.subscribe(`config.chart.items.${GSTCID('1')}`, (item) => {
                    console.log('item 1 changed', item);
                })
            );
            subs.push(
                state1.subscribe(`config.list.rows.${GSTCID('1')}`, (row) => {
                    console.log('row 1 changed', row);
                })
            );
        },
        onLoaded(gstc) {
            console.log('gstc loaded!', gstc);
            window.gstc = gstc; // you can console it out
            setTimeout(() => {
                const item1 = this.config.chart.items[GSTCID('1')];
                item1.label = 'label changed dynamically';
                item1.time.end += 2 * 24 * 60 * 60 * 1000;
                const row1 = this.config.list.rows[GSTCID('1')];
                row1.label = 'label changed dynamically';
            }, 4000);
        },
    },
    beforeUnmount() {
        subs.forEach((unsub) => unsub());
    },
};
</script>
